<template>
  <el-row :gutter="10">
    <el-col :span="12">
      <e-charts class="echarts" :option="option1" />
    </el-col>
    <el-col :span="12">
      <e-charts class="echarts" :option="option2" />
    </el-col>
  </el-row>
  <el-row :gutter="10">
    <el-col :span="12"> </el-col>
    <el-col :span="12"> </el-col>
  </el-row>
</template>

<script lang="ts" setup>
// 导入组件
import { ref, reactive, computed } from "vue";
// 导入数据的api
import Api from "@/api";

// 定义存储数据的变量
const DATA = reactive({
  date: ref(),
  hight: ref(""),
  low: ref(""),
});

// 获取后台数据
const initWeatherData = () => {
  Api.TaskOrder.echarts().then((res) => {
    DATA.date = res.data.date;
    DATA.hight = res.data.hight;
    DATA.low = res.data.low;
  });
};

// 定义一个option1
const option1 = {
  title: {
    text: "ECharts 入门示例",
    left: "center",
  },
  tooltip: {},
  legend: {
    data: ["销量"],
    x: 100,
    y: 20,
  },
  xAxis: {
    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
  },
  yAxis: {},
  series: [
    {
      name: "销量",
      type: "bar",
      data: [5, 20, 36, 10, 10, 20],
    },
  ],
};

const option2 = computed(() => {
  return {
    title: {
      text: "成都市未来7天的气温",
      left: "center",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      x: 100,
      y: 20,
    },
    toolbox: {
      show: true,
      feature: {
        dataZoom: {
          yAxisIndex: "none",
        },
        dataView: { readOnly: false },
        magicType: { type: ["line", "bar"] },
        restore: {},
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: DATA.date,
    },
    yAxis: {
      type: "value",
      axisLabel: {
        formatter: "{value} °C",
      },
    },
    series: [
      {
        name: "最高温",
        type: "line",
        data: DATA.hight,
        markPoint: {
          data: [
            { type: "max", name: "Max" },
            { type: "min", name: "Min" },
          ],
        },
        markLine: {
          data: [{ type: "average", name: "Avg" }],
        },
      },
      {
        name: "最低温",
        type: "line",
        data: DATA.low,
        markPoint: {
          data: [{ name: "周最低", value: -2, xAxis: 1, yAxis: -1.5 }],
        },
        markLine: {
          data: [
            { type: "average", name: "Avg" },
            [
              {
                symbol: "none",
                x: "90%",
                yAxis: "max",
              },
              {
                symbol: "circle",
                label: {
                  position: "start",
                  formatter: "Max",
                },
                type: "max",
                name: "最高点",
              },
            ],
          ],
        },
      },
    ],
  };
});

// 自动执行
initWeatherData();
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.echarts {
  border-radius: 4px;
  height: 400px;
}
</style>
